<template>
    <div v-html="mdp" class="markdown_wrap markdown-body"></div>
</template>

<script>
import { marked } from 'marked'
import '@/assets/typora_default.css'
// marked.use({
//     // 开启异步渲染
//     async: true,
//     pedantic: false,
//     gfm: true,
//     mangle: false,
//     headerIds: false
// })

export default {
    props: {
        mdt: {
            required: true
        }
    },
    data() {
        return {
            mdp: ''
        }
    },
    watch: {
        mdt: {
            handler(n, o) {
                this.mdp = marked.parse(this.mdt)
            },
            immediate: true
        }
    }
}
</script>

<style scoped lang="less">
div {
    padding: 0.1rem 0.2rem;
    padding-bottom: 0.4rem !important;
    border: 0.05rem solid transparent;
    border-radius: 0.2rem;

    &:hover {
        /* background: #00000011; */
        border: 0.05rem solid #00000066;
    }

    * {
        font-size: 24px !important;
    }
}
</style>